<template>
  <div>
    <el-dialog
      title="零活信息"
      :visible.sync="dialogVisible"
      width="900px"
      v-if="workDatalist"
    >
      <div class="description" v-loading="loading">
        <div class="title">发布者信息</div>
        <div class="acea-row">
          <div class="description-term">姓名：{{workDatalist.user.name | filterEmpty}}</div>
          <div class="description-term">电话：{{workDatalist.user.phone_number | filterEmpty}}</div>
          <div class="description-term">是否企业发布：{{workDatalist.is_enterprise | isEnterpriseFilter}}</div>
          <div class="description-term" v-if="workDatalist.is_enterprise === 1 && workDatalist.enterprise">关联企业：{{workDatalist.enterprise.name | filterEmpty}}</div>
        </div>
        <el-divider></el-divider>
        <div class="title">零活信息</div>
        <div class="acea-row">
          <div class="description-term">零活名称：{{workDatalist.name}}</div>
          <div class="description-term">零活状态：{{workDatalist.process_status_text}}</div>
          <div class="description-term">工种类型：{{workDatalist.type_text}}</div>
          <div class="description-term">用工人数：{{workDatalist.population}}</div>
<!--          <div class="description-term">计价方式：{{workDatalist.couponPrice}}</div>-->
          <div class="description-term">单价：{{workDatalist.price}} {{workDatalist.price_text}}</div>
          <div class="description-term">预估工期：{{workDatalist.duration}} {{workDatalist.unit_text}}</div>
          <div class="description-term">开工时间：{{workDatalist.start_time_text}}</div>
          <div class="description-term fontColor3">工作地址：{{workDatalist.address}}</div>
          <div class="description-term">发布时间：{{workDatalist.create_time}}</div>
          <div class="description-all-term">零活描述：{{workDatalist.describe}}</div>
          <div class="description-all-term">
            工作环境及操作规范文件：
            <div class="acea-row" v-if="workDatalist.attachment">
              <div
                v-for="(item,index) in workDatalist.attachment"
                :key="index"
                class="pictrue mb10"
                draggable="true"
              >
                <el-image
                  class="photo-el-image"
                  :src="item"
                  :preview-src-list="workDatalist.attachment"
                />
              </div>
            </div>
          </div>
        </div>
        <template v-if="workDatalist.department_id !== 0 && workDatalist.department">
          <el-divider></el-divider>
          <div class="title">所属人力资源公司信息</div>
          <div class="acea-row">
            <div class="description-term">公司名称：{{workDatalist.department.name}}</div>
            <div class="description-term">公司地址：{{workDatalist.department.address}}</div>

            <div class="description-term">是否公开：{{workDatalist.is_show | isShowFilter}}</div>
            <div class="description-term">公开时间：{{workDatalist.is_show === 1 ? workDatalist.show_time_text : '-'}}</div>

<!--            <div class="description-term">重定人数：{{workDatalist.deliveryName | filterEmpty}}</div>-->
<!--            <div class="description-term">重定单价：{{workDatalist.deliveryName | filterEmpty}}</div>-->
          </div>
        </template>
      </div>
    </el-dialog>
<!--    <el-dialog-->
<!--      v-if="workDatalist"-->
<!--      title="提示"-->
<!--      :visible.sync="modal2"-->
<!--      width="30%">-->
<!--      <div class="logistics acea-row row-top">-->
<!--        <div class="logistics_img"><img src="@/assets/imgs/expressi.jpg"></div>-->
<!--        <div class="logistics_cent">-->
<!--          <span class="mb10">物流公司：{{workDatalist.deliveryName}}</span>-->
<!--          <span>物流单号：{{workDatalist.deliveryId}}</span>-->
<!--        </div>-->
<!--      </div>-->
<!--      <span slot="footer" class="dialog-footer">-->
<!--      <el-button type="primary" @click="modal2 = false">关闭</el-button>-->
<!--  </span>-->
<!--    </el-dialog>-->
  </div>
</template>

<script>
import { workDetailApi } from '@/api/workApi.js'
export default {
  name: 'WorkDetail',
  filters: {
    isEnterpriseFilter(status) {
      const statusMap = {
        0: '-',
        1: '是',
        2: '否',
      }
      return statusMap[status]
    },
    isShowFilter(status) {
      const statusMap = {
        0: '-',
        1: '是',
        2: '否',
      }
      return statusMap[status]
    },
  },
  props: {
    id: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      reverse: true,
      dialogVisible: false,
      workDatalist: null,
      loading: false,
      modal2: false,
    }
  },
  mounted() {

  },
  methods: {
    openLogistics () {
      this.modal2 = true;
    },
    getDetail(id) {
      this.loading = true
      workDetailApi({id: id}).then(res => {
        this.workDatalist = res
        this.loading = false
      }).catch(() => {
        this.workDatalist = null
        this.loading = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
.logistics {
  align-items: center;
  padding: 10px 0px;
  .logistics_img {
    width: 45px;
    height: 45px;
    margin-right: 12px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .logistics_cent {
    span {
      display: block;
      font-size: 12px;
    }
  }
}

.trees-coadd {
  width: 100%;
  height: 400px;
  border-radius: 4px;
  overflow: hidden;
  .scollhide {
    width: 100%;
    height: 100%;
    overflow: auto;
    margin-left: 18px;
    padding: 10px 0 10px 0;
    box-sizing: border-box;
    .content {
      font-size: 12px;
    }

    .time {
      font-size: 12px;
      color: #2d8cf0;
    }

  }
}

.title {
  margin-bottom: 14px;
  color: #303133;
  font-weight: 500;
  font-size: 14px;
}

.description {
  height:65vh;
  overflow-y: auto;
  &-term {
    display: table-cell;
    padding-bottom: 5px;
    line-height: 20px;
    width: 50%;
    font-size: 12px;
    color: #606266;
  }
  &-all-term{
    display: table-cell;
    padding-bottom: 5px;
    line-height: 20px;
    width: 100%;
    font-size: 12px;
    color: #606266;
  }
  ::v-deep .el-divider--horizontal {
    margin: 12px 0 !important;
  }
}

.pictrue{
  width: 158px;
  height: 150px;
  border: 1px dotted rgba(0,0,0,0.1);
  margin-right: 10px;
  position: relative;
  cursor: pointer;
  .photo-el-image{
    width: 100%;
    height: 100%;
  }
  img{
    width: 100%;
    height: 100%;
  }
  video{
    width: 100%;
    height: 100%;
  }
}

</style>
